import React, { useState, useEffect } from 'react';
import { Layout, Button, Row, Col, Empty, Spin, message, Modal, Card } from 'antd';
import { 
  ArrowLeftOutlined, 
  PlusOutlined, 
  ReloadOutlined,
  ExperimentOutlined
} from '@ant-design/icons';
import { useParams, useNavigate } from 'react-router-dom';
import CategoryCard from '../components/system/CategoryCard';
import CategoryForm from '../components/system/CategoryForm';
import { projectApi, categoryApi, parameterApi, parameterValueApi } from '../services/api';
import { Project, ParameterCategory, Parameter, ParameterCategoryCreate, ParameterCategoryUpdate, ParameterCreate, ParameterUpdate } from '../types';

const { Content } = Layout;

const ProjectDetail: React.FC = () => {
  const { projectId } = useParams<{ projectId: string }>();
  const navigate = useNavigate();
  
  const [project, setProject] = useState<Project | null>(null);
  const [categories, setCategories] = useState<ParameterCategory[]>([]);
  const [loading, setLoading] = useState(true);
  const [categoryFormVisible, setCategoryFormVisible] = useState(false);
  const [editingCategory, setEditingCategory] = useState<ParameterCategory | undefined>();
  const [deletingCategory, setDeletingCategory] = useState<ParameterCategory | undefined>();
  const [deletingParameter, setDeletingParameter] = useState<{ category: ParameterCategory; parameter: Parameter } | undefined>();

  // 加载项目详情和分类列表
  const loadProjectData = async () => {
    if (!projectId) return;
    
    try {
      setLoading(true);
      
      // 一次性获取所有数据（使用 JSON 导出接口）
      const detailedData = await projectApi.getProjectDetailed(projectId);
      
      // 设置项目信息（JSON 导出接口现在包含完整的项目信息）
      setProject(detailedData.project);
      
      // 新格式：categories 是数组，parameters 也是数组
      // 转换后端返回的数据格式为前端期望的格式
      const categoriesArray = (detailedData.categories || []).map((categoryData: any) => {
        // 转换参数字典为数组（新格式中 parameters 已经是数组）
        const parametersArray = (categoryData.parameters || []).map((paramData: any) => {
          // 转换参数值：新格式中 values 是数组，每个元素有 {id, index, value, created_at, updated_at}
          const values = (paramData.values || []).map((valueItem: any) => ({
            id: valueItem.id,
            parameter_id: paramData.id,
            value: valueItem.value,
            list_index: valueItem.index !== null && valueItem.index !== undefined ? valueItem.index : undefined,
            created_at: valueItem.created_at || new Date().toISOString(),
            updated_at: valueItem.updated_at || new Date().toISOString()
          }));
          
          return {
            id: paramData.id,
            name: paramData.name,
            name_en: paramData.name_en,
            param_type: paramData.param_type,
            unit: paramData.unit,
            description: paramData.description,
            is_list: paramData.is_list,
            is_year_related: paramData.is_year_related,
            list_length: paramData.list_length,
            sort_order: paramData.sort_order || 0,
            category_id: categoryData.id,
            created_at: paramData.created_at || new Date().toISOString(),
            updated_at: paramData.updated_at || new Date().toISOString(),
            values: values
          };
        });
        
        // 按 sort_order 降序排序参数
        const sortedParameters = [...parametersArray].sort((a, b) => {
          if (a.sort_order !== b.sort_order) {
            return b.sort_order - a.sort_order;
          }
          return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
        });
        
        return {
          id: categoryData.id,
          project_id: detailedData.project.id,
          name: categoryData.name,
          name_en: categoryData.name_en,
          description: categoryData.description,
          sort_order: categoryData.sort_order || 0,
          created_at: categoryData.created_at || new Date().toISOString(),
          updated_at: categoryData.updated_at || new Date().toISOString(),
          parameters: sortedParameters
        };
      });
      
      // 按 sort_order 降序排序分类
      const sortedCategories = [...categoriesArray].sort((a, b) => {
        if (a.sort_order !== b.sort_order) {
          return b.sort_order - a.sort_order;
        }
        return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
      });
      
      setCategories(sortedCategories);
    } catch (error) {
      console.error('Failed to load project data:', error);
      message.error('加载项目数据失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadProjectData();
  }, [projectId]);

  // 创建参数分类
  const handleCreateCategory = async (values: ParameterCategoryCreate) => {
    if (!projectId) return;
    
    try {
      // 确保 sort_order 有默认值
      const categoryData: ParameterCategoryCreate = {
        ...values,
        sort_order: values.sort_order ?? 0
      };
      const newCategory = await categoryApi.createCategoryByName(projectId, categoryData);
      
      // 局部更新：添加新分类到列表，然后重新排序
      setCategories(prev => {
        const updated = [...prev, { ...newCategory, parameters: [] }];
        // 按 sort_order 降序排序分类列表（创建新数组，确保React检测到变化）
        return [...updated].sort((a, b) => {
          if (a.sort_order !== b.sort_order) {
            return b.sort_order - a.sort_order;
          }
          return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
        });
      });
      
      setCategoryFormVisible(false);
      message.success('参数分类创建成功');
    } catch (error: any) {
      console.error('Failed to create category:', error);
      
      // 显示后端返回的具体错误信息
      if (error?.response?.data?.detail) {
        message.error(error.response.data.detail);
      } else {
        message.error('创建参数分类失败');
      }
    }
  };

  // 更新参数分类
  const handleUpdateCategory = async (values: ParameterCategoryUpdate) => {
    if (!projectId || !editingCategory || !project) return;
    
    try {
      // 确保 sort_order 有值
      const updateData: ParameterCategoryUpdate = {
        ...values,
        sort_order: values.sort_order !== undefined ? values.sort_order : editingCategory.sort_order
      };
      
      const updatedCategory = await categoryApi.updateCategoryByName(
        project.name_en, 
        editingCategory.name_en, 
        updateData
      );
      
      // 局部更新：只更新对应分类，然后重新排序整个列表
      setCategories(prev => {
        const updated = prev.map(c => {
          if (c.id === editingCategory.id) {
            // 保留原有的 created_at，确保排序正确
            return { 
              ...updatedCategory, 
              created_at: c.created_at,  // 保留原始创建时间
              parameters: c.parameters || [] 
            };
          }
          return c;
        });
        // 按 sort_order 降序排序分类列表（创建新数组，确保React检测到变化）
        return [...updated].sort((a, b) => {
          if (a.sort_order !== b.sort_order) {
            return b.sort_order - a.sort_order;
          }
          return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
        });
      });
      
      setEditingCategory(undefined);
      setCategoryFormVisible(false);
      message.success('参数分类更新成功');
    } catch (error: any) {
      console.error('Failed to update category:', error);
      
      // 显示后端返回的具体错误信息
      if (error?.response?.data?.detail) {
        message.error(error.response.data.detail);
      } else {
        message.error('更新参数分类失败');
      }
    }
  };

  // 删除参数分类
  const handleDeleteCategory = async () => {
    if (!projectId || !deletingCategory || !project) return;
    
    try {
      await categoryApi.deleteCategoryByName(project.name_en, deletingCategory.name_en);
      setCategories(prev => prev.filter(c => c.id !== deletingCategory.id));
      setDeletingCategory(undefined);
      message.success('参数分类删除成功');
    } catch (error) {
      console.error('Failed to delete category:', error);
      message.error('删除参数分类失败');
    }
  };


  // 删除参数
  const handleDeleteParameter = async () => {
    if (!projectId || !deletingParameter || !project) return;
    
    const { category, parameter } = deletingParameter;
    
    try {
      await parameterApi.deleteParameterByName(project.name_en, category.name_en, parameter.name_en);
      
      // 更新分类中的参数列表
      setCategories(prev => 
        prev.map(c => 
          c.id === category.id 
            ? { 
                ...c, 
                parameters: (c.parameters || []).filter(p => p.id !== parameter.id)
              }
            : c
        )
      );
      
      setDeletingParameter(undefined);
      message.success('参数删除成功');
    } catch (error) {
      console.error('Failed to delete parameter:', error);
      message.error('删除参数失败');
    }
  };

  // 编辑分类
  const handleEditCategory = (category: ParameterCategory) => {
    setEditingCategory(category);
    setCategoryFormVisible(true);
  };

  // 删除分类确认
  const handleDeleteCategoryConfirm = (category: ParameterCategory) => {
    setDeletingCategory(category);
  };

  // 置顶参数分类
  const handlePinCategoryToTop = async (category: ParameterCategory) => {
    if (!project) return;
    
    try {
      // 找到当前所有分类中的最大 sort_order
      const maxSortOrder = categories.reduce((max, cat) => 
        Math.max(max, cat.sort_order), 
        category.sort_order
      );
      
      // 设置新分类为最大值 + 1，使其排在最前面
      const newSortOrder = maxSortOrder + 1;
      
      // 更新分类的 sort_order
      await categoryApi.updateCategoryByName(
        project.name_en,
        category.name_en,
        { sort_order: newSortOrder }
      );
      
      // 局部更新：只更新对应分类的 sort_order，然后重新排序整个列表
      setCategories(prev => {
        const updated = prev.map(c => {
          if (c.id === category.id) {
            return { 
              ...c, 
              sort_order: newSortOrder,
              created_at: c.created_at  // 保留原始创建时间
            };
          }
          return c;
        });
        // 按 sort_order 降序排序分类列表（创建新数组，确保React检测到变化）
        return [...updated].sort((a, b) => {
          if (a.sort_order !== b.sort_order) {
            return b.sort_order - a.sort_order;
          }
          return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
        });
      });
      
      message.success('参数分类已置顶');
    } catch (error: any) {
      console.error('Failed to pin category:', error);
      if (error?.response?.data?.detail) {
        message.error(error.response.data.detail);
      } else {
        message.error('置顶失败');
      }
    }
  };

  // 置顶参数
  const handlePinParameterToTop = async (category: ParameterCategory, parameter: Parameter) => {
    if (!project) return;
    
    try {
      // 找到当前分类中所有参数的最大 sort_order
      const categoryData = categories.find(c => c.id === category.id);
      const maxSortOrder = (categoryData?.parameters || []).reduce((max, p) => 
        Math.max(max, p.sort_order), 
        parameter.sort_order
      );
      
      // 设置新参数为最大值 + 1，使其排在最前面
      const newSortOrder = maxSortOrder + 1;
      
      // 更新参数的 sort_order
      await parameterApi.updateParameterByName(
        project.name_en,
        category.name_en,
        parameter.name_en,
        { sort_order: newSortOrder }
      );
      
      // 局部更新：只更新对应分类中的对应参数的 sort_order，然后重新排序
      setCategories(prev => prev.map(c => {
        if (c.id === category.id) {
          const updatedParameters = (c.parameters || []).map(p => {
            if (p.id === parameter.id) {
              return { 
                ...p, 
                sort_order: newSortOrder,
                created_at: p.created_at  // 保留原始创建时间
              };
            }
            return p;
          });
          // 按 sort_order 降序排序参数（创建新数组，确保React检测到变化）
          const sortedParameters = [...updatedParameters].sort((a, b) => {
            if (a.sort_order !== b.sort_order) {
              return b.sort_order - a.sort_order;
            }
            return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
          });
          return { ...c, parameters: sortedParameters };
        }
        return c;
      }));
      
      message.success('参数已置顶');
    } catch (error: any) {
      console.error('Failed to pin parameter:', error);
      if (error?.response?.data?.detail) {
        message.error(error.response.data.detail);
      } else {
        message.error('置顶失败');
      }
    }
  };

  // 添加参数
  const handleAddParameter = (category: ParameterCategory) => {
    // 这里需要打开参数表单，但我们需要在 CategoryCard 中处理
    // 所以这里不需要实现，CategoryCard 会直接调用自己的 handleAddParameter
  };

  // 创建参数
  const handleCreateParameter = async (category: ParameterCategory, values: any) => {
    if (!projectId || !project) {
      throw new Error('项目信息不完整');
    }
    
    try {
      // 确保 sort_order 有默认值
      const parameterData: ParameterCreate = {
        ...values,
        sort_order: values.sort_order ?? 0
      };
      
      const newParameter = await parameterApi.createParameterByName(
        project.name_en, 
        category.name_en, 
        parameterData
      );
      
      // 局部更新：添加新参数到对应分类，然后重新排序
      setCategories(prev => prev.map(c => {
        if (c.id === category.id) {
          const updatedParameters = [...(c.parameters || []), { ...newParameter, values: [] }];
          // 按 sort_order 降序排序参数（创建新数组，确保React检测到变化）
          const sortedParameters = [...updatedParameters].sort((a, b) => {
            if (a.sort_order !== b.sort_order) {
              return b.sort_order - a.sort_order;
            }
            return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
          });
          return { ...c, parameters: sortedParameters };
        }
        return c;
      }));
    } catch (error: any) {
      console.error('❌ Failed to create parameter:', error);
      throw error;
    }
  };

  // 更新参数
  const handleUpdateParameter = async (category: ParameterCategory, parameter: Parameter, values: any) => {
    if (!projectId || !project) {
      throw new Error('项目信息不完整');
    }
    
    try {
      // 确保 sort_order 有值
      const updateData: ParameterUpdate = {
        ...values,
        sort_order: values.sort_order !== undefined ? values.sort_order : parameter.sort_order
      };
      
      const updatedParameter = await parameterApi.updateParameterByName(
        project.name_en, 
        category.name_en, 
        parameter.name_en, 
        updateData
      );
      
      // 局部更新：只更新对应分类中的对应参数，然后重新排序
      setCategories(prev => prev.map(c => {
        if (c.id === category.id) {
          const updatedParameters = (c.parameters || []).map(p => {
            if (p.id === parameter.id) {
              // 保留原有的 created_at，确保排序正确
              return { 
                ...updatedParameter, 
                created_at: p.created_at,  // 保留原始创建时间
                values: p.values || [] 
              };
            }
            return p;
          });
          // 按 sort_order 降序排序参数（创建新数组，确保React检测到变化）
          const sortedParameters = [...updatedParameters].sort((a, b) => {
            if (a.sort_order !== b.sort_order) {
              return b.sort_order - a.sort_order;
            }
            return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
          });
          return { ...c, parameters: sortedParameters };
        }
        return c;
      }));
    } catch (error: any) {
      console.error('Failed to update parameter:', error);
      
      // 重新抛出错误，让 ParameterForm 组件处理错误显示
      throw error;
    }
  };

  // 获取参数的默认值（根据类型）
  const getDefaultValue = (paramType: string): string => {
    switch (paramType) {
      case 'integer':
      case 'float':
        return '0';
      case 'boolean':
        return 'false';
      case 'string':
      default:
        return '';
    }
  };

  // 设置参数值
  const handleSetParameterValues = async (category: ParameterCategory, parameter: Parameter, values: string[]) => {
    if (!projectId || !project) return;
    
    try {
      console.log('🎯 Setting parameter values:', {
        projectNameEn: project.name_en,
        categoryNameEn: category.name_en,
        parameterNameEn: parameter.name_en,
        isList: parameter.is_list,
        values
      });
      
      let valuesToSubmit = values;
      
      // 对于有固定长度的列表参数，确保值的数量正确
      if (parameter.is_list && parameter.list_length && parameter.list_length > 0) {
        // 如果传入的值数量不足，用默认值补齐
        if (values.length < parameter.list_length) {
          const defaultValue = getDefaultValue(parameter.param_type);
          const paddedValues = [...values];
          while (paddedValues.length < parameter.list_length) {
            paddedValues.push(defaultValue);
          }
          valuesToSubmit = paddedValues;
          console.log('📝 Padding values to match list_length:', {
            originalLength: values.length,
            listLength: parameter.list_length,
            paddedLength: paddedValues.length
          });
        }
      }
      
      if (parameter.is_list) {
        // 列表参数使用批量设置 API
        await parameterValueApi.setParameterValuesByName(
          project.name_en,
          category.name_en,
          parameter.name_en,
          valuesToSubmit
        );
      } else {
        // 非列表参数使用单个设置 API，只取第一个值
        if (valuesToSubmit.length > 0) {
          await parameterValueApi.createParameterValueByName(
            project.name_en,
            category.name_en,
            parameter.name_en,
            { value: valuesToSubmit[0] }
          );
        }
      }
      
      // 局部更新：直接使用提交的值更新状态，避免重新请求服务器
      // 构造参数值数组格式
      const updatedValues = valuesToSubmit.map((value, index) => ({
        id: Date.now() + index, // 临时ID，实际应使用服务器返回的ID
        parameter_id: parameter.id,
        value: value,
        list_index: parameter.is_list ? index : undefined,
        created_at: new Date().toISOString(),
        updated_at: new Date().toISOString()
      }));
      
      // 更新分类中的参数值
      setCategories(prev => 
        prev.map(c => 
          c.id === category.id 
            ? { 
                ...c, 
                parameters: (c.parameters || []).map(p => 
                  p.id === parameter.id 
                    ? { ...p, values: updatedValues }
                    : p
                )
              }
            : c
        )
      );
      
      message.success('参数值设置成功');
    } catch (error) {
      console.error('Failed to set parameter values:', error);
      message.error('设置参数值失败');
    }
  };

  // 编辑参数
  const handleEditParameter = (category: ParameterCategory, parameter: Parameter) => {
    // 这里可以打开参数编辑表单
    console.log('Edit parameter:', parameter);
    message.info('编辑参数功能待实现');
  };

  // 删除参数确认
  const handleDeleteParameterConfirm = (category: ParameterCategory, parameter: Parameter) => {
    setDeletingParameter({ category, parameter });
  };

  // 表单提交
  const handleCategoryFormSubmit = async (values: ParameterCategoryCreate | ParameterCategoryUpdate) => {
    if (editingCategory) {
      await handleUpdateCategory(values as ParameterCategoryUpdate);
    } else {
      await handleCreateCategory(values as ParameterCategoryCreate);
    }
  };

  // 关闭表单
  const handleCategoryFormCancel = () => {
    setCategoryFormVisible(false);
    setEditingCategory(undefined);
  };

  if (loading) {
    return (
      <Layout>
        <Content>
          <div className="loading-container">
            <Spin size="large" />
          </div>
        </Content>
      </Layout>
    );
  }

  if (!project) {
    return (
      <Layout>
        <Content>
          <Empty description="项目不存在" />
        </Content>
      </Layout>
    );
  }

  return (
    <Layout>
      <Content>
        <div className="page-header">
          <div className="header-content">
            <div className="header-left">
              <div style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
                <Button 
                  type="text" 
                  icon={<ArrowLeftOutlined />} 
                  onClick={() => navigate('/')}
                  style={{ 
                    marginRight: 16, 
                    color: 'white',
                    border: '1px solid rgba(255,255,255,0.3)',
                    background: 'rgba(255,255,255,0.1)'
                  }}
                >
                  返回
                </Button>
                <h1 className="page-title" style={{ margin: 0 }}>{project.name}</h1>
              </div>
              <p className="page-description" style={{ margin: 0 }}>
                {project.description || `项目英文名: ${project.name_en}`}
              </p>
              <div style={{ marginTop: 8, fontSize: '14px', color: 'rgba(255,255,255,0.8)' }}>
                <span>时间范围: {project.start_year} - {project.end_year} 年</span>
                <span style={{ marginLeft: 16 }}>步长: {project.year_step} 年</span>
                <span style={{ marginLeft: 16 }}>总时长: {project.time_horizon} 年</span>
              </div>
            </div>
            <div className="header-actions">
              <Button
                type="primary"
                icon={<ExperimentOutlined />}
                onClick={() => navigate(`/project/${project.name_en}/experiments`)}
                size="large"
                style={{
                  background: 'rgba(135, 206, 250, 0.3)',
                  border: '1px solid rgba(135, 206, 250, 0.5)',
                  color: 'white',
                  marginRight: 12
                }}
              >
                实验结果
              </Button>
              <Button
                type="primary"
                icon={<PlusOutlined />}
                onClick={() => setCategoryFormVisible(true)}
                size="large"
                style={{
                  background: 'rgba(255,255,255,0.2)',
                  border: '1px solid rgba(255,255,255,0.3)',
                  color: 'white'
                }}
              >
                新建分类
              </Button>
            </div>
          </div>
        </div>

        <div className="page-content">
          <div className="category-grid">
            {categories.length === 0 ? (
              <Empty
                description="暂无参数分类"
                image={Empty.PRESENTED_IMAGE_SIMPLE}
              >
                <Button 
                  type="primary" 
                  icon={<PlusOutlined />}
                  onClick={() => setCategoryFormVisible(true)}
                >
                  创建第一个参数分类
                </Button>
              </Empty>
            ) : (
              categories.map(category => (
                <div key={category.id} className="project-card-wrapper">
                  <CategoryCard
                    category={category}
                    project={project}
                    onEditCategory={handleEditCategory}
                    onDeleteCategory={handleDeleteCategoryConfirm}
                    onPinToTop={handlePinCategoryToTop}
                    onAddParameter={handleAddParameter}
                    onEditParameter={handleEditParameter}
                    onDeleteParameter={handleDeleteParameterConfirm}
                    onPinParameterToTop={handlePinParameterToTop}
                    onCreateParameter={handleCreateParameter}
                    onUpdateParameter={handleUpdateParameter}
                    onSetParameterValues={handleSetParameterValues}
                  />
                </div>
              ))
            )}
          </div>
        </div>

        {/* 参数分类表单 */}
        <CategoryForm
          visible={categoryFormVisible}
          onCancel={handleCategoryFormCancel}
          onSubmit={handleCategoryFormSubmit}
          initialValues={editingCategory}
          title={editingCategory ? '编辑参数分类' : '新建参数分类'}
        />

        {/* 删除分类确认对话框 */}
        <Modal
          title="确认删除"
          open={!!deletingCategory}
          onOk={handleDeleteCategory}
          onCancel={() => setDeletingCategory(undefined)}
          okText="删除"
          cancelText="取消"
          okButtonProps={{ danger: true }}
        >
          <p>确定要删除参数分类 <strong>{deletingCategory?.name}</strong> 吗？</p>
          <p style={{ color: '#ff4d4f' }}>此操作不可撤销，将同时删除该分类下的所有参数。</p>
        </Modal>

        {/* 删除参数确认对话框 */}
        <Modal
          title="确认删除"
          open={!!deletingParameter}
          onOk={handleDeleteParameter}
          onCancel={() => setDeletingParameter(undefined)}
          okText="删除"
          cancelText="取消"
          okButtonProps={{ danger: true }}
        >
          <p>确定要删除参数 <strong>{deletingParameter?.parameter.name}</strong> 吗？</p>
          <p style={{ color: '#ff4d4f' }}>此操作不可撤销。</p>
        </Modal>
      </Content>
    </Layout>
  );
};

export default ProjectDetail;
